<template>
    <div class="background">
        <div class="img1">
            <van-image width="60vw" fit  :src="jingnuo" />
        </div>
        <div class="img2">
            <van-image width="25vw" fit  :src="youpin" />
        </div>
        <div class="title">
            欢迎来到靖诺优品
        </div>
        <div class="tac">
            <span class="inputdiv">
                <span style="width:10vw;vertical-align: middle;">+86</span>
                <span class="line1"></span>
                <input type="text" class="input1" v-model="mobile" placeholder="请输入手机">
            </span>
            <span class="inputdiv">
                <van-image fit :src="img1" class="png" ></van-image>
                <input :type="type" class="input2" v-model="password" placeholder="请输入密码">
                <van-image fit :src="eye" class="eye" v-if="type!='password'" @click="type='password'"></van-image>
                <van-image fit :src="eyeslash" class="eye" v-else @click="type='text'"></van-image>
            </span>
            <span class="inputdiv">
                <van-image fit :src="img1" class="png" ></van-image>
                <input :type="type2" class="input2" v-model="password2" placeholder="请再次确认密码">
                <van-image fit :src="eye" class="eye" v-if="type2!='password'" @click="type2='password'"></van-image>
                <van-image fit :src="eyeslash" class="eye" v-else @click="type2='text'"></van-image>
            </span>
            <span class="inputdiv">
                <van-image fit :src="img2" class="png" ></van-image>
                <input type="text" class="input3" v-model="inviteCode" placeholder="请输入邀请码">
            
            </span>
            <span class="inputdiv">
                <van-image fit :src="img3" class="png" ></van-image>
                <input type="text" class="input3" v-model="idName" placeholder="姓名">
            
            </span>
            <span class="inputdiv">
                <van-image fit :src="img4" class="png" ></van-image>
                <input type="text" class="input3" v-model="idCard" placeholder="请输入身份号">
            
            </span>
            <span class="inputdiv">
                <van-image fit :src="img5" class="png" ></van-image>
                <input type="text" class="input4" v-model="code" placeholder="请输入验证码">
                <span style="width:20vw;vertical-align: middle;display:inline-block;color:#CF000E" v-if="!isCount" @click="getCode">获取验证码</span>
                <span style="width:20vw;vertical-align: middle;display:inline-block;color:#CF000E" v-else>剩余<van-count-down @finish="onFinish" ref="countDown" :time="60000" format="ss" style="width:5vw;vertical-align: middle;display:inline-block;color:#CF000E" />秒</span>

            </span>
            <van-button round class="login" @click="register">立即注册</van-button>
            <span class="text" style="margin-top:10px">已有账号？<span style="color:#CF000E" @click="goLogin">立即登录</span> </span>
            <div style="margin-top:20vw;"> <input id="radio" name="radio" type="radio" checked style="transform: translateY(-10%);">已阅读并同意<span style="color:#CF000E" @click="jump(1)">《靖诺用户协议》</span>和<span style="color:#CF000E" @click="jump(2)">《隐私协议》</span> </div>
        </div>
       
    </div>
</template>

<script setup>
import jingnuo from '@image/Login/jingnuo.png'
import youpin from '@image/Login/youpin.png'
import eye from '@image/Login/eye.svg'
import eyeslash from '@image/Login/eye-slash.svg'
import img1 from '@image/Login/img1.png'
import img2 from '@image/Login/img2.png'
import img3 from '@image/Login/img3.png'
import img4 from '@image/Login/img4.png'
import img5 from '@image/Login/img5.png'
import { ref, reactive,onMounted } from 'vue';
import apis from '@/apis/login.js'
import { useRoute, useRouter} from 'vue-router'
import { showToast } from "vant"
import { useCountDown } from '@vant/use';
let mobile = ref('');
let password = ref('');
let type = ref('password');
let password2 = ref('');
let type2 = ref('password');
let inviteCode = ref('');
let idName = ref('');
let idCard = ref('');
let code = ref('');
let isCount = ref(false);
const countDown = ref(null);
const router=useRouter()
let register = () => {
    
    const regex = /^1[3-9]\d{9}$/;
    if(!regex.test(mobile.value.trim())){
        showToast('请输入正确的手机号码');
        return false
    }
    if(!password.value){
        showToast('请输入密码');
        return false
    }
    if(password.value!=password2.value){
        showToast('两次密码输入不一致');
        return false
    }
    if(password.value.length<=5){
        showToast('至少输入六位密码');
        return false
    }
    if(password.value.length>20){
        showToast('至多输入二十位密码');
        return false
    }
    if(!inviteCode.value){
        showToast('请输入邀请码');
        return false
    }
    if(!idName.value){
        showToast('请输入姓名');
        return false
    }
    if(!idCard.value){
        showToast('请输入身份证号码');
        return false
    }
    
  try{
    apis.register({
        mobile:mobile.value,
        password:password.value,
        sup_invitation_code:inviteCode.value,
        captcha:code.value,
        id_crad:idCard.value,
        nickname:idName.value
    }).then((res)=>{
        if(res.code=='200'){
            showToast('注册成功');
            router.push('/Login')
        }else{
            showToast(res.msg);
        }
        
    })
  }catch(e){

  }
  
}
let jump = (val) => {
    
    router.push('/Agreement?type='+val)
  
}
let goLogin = () => {
    
    router.push('/Login')
  
}
let onFinish=() => {
    
    isCount.value=false
}
let getCode=()=>{
    const regex = /^1[3-9]\d{9}$/;
    if(!regex.test(mobile.value.trim())){
        showToast('请输入正确的手机号码');
        return false
    }
    
    try{
    apis.smsSend({
        mobile:mobile.value,
        event: 'register'
    }).then((res)=>{
        if(res.code=='200'){
            isCount.value=true
            showToast('验证码已发送');
        }else{
            showToast(res.msg);
        }
        
    })
  }catch(e){

  }
}
</script>

<style lang="scss" scoped>
.background{
    background-image: linear-gradient(#FFF7EA , #FFDBD6, #FFDAD5,#fff,#fff,#fff);
    padding-bottom:5vw;
}
.img1{
    text-align:center;
    padding-top:100px;
}
.img2{
    text-align:center;
    margin-top:-35px;
    transform:translateX(-30%)
}
.title{
    color:#333;
    font-weight:700;
    font-size:60px;
    margin-top:10px;
    transform:translateX(-12%);
    text-align:center;
}
.tac{
    text-align:center;
}
.line1{
    display:inline-block;
    width:1px;
    height:36px;
    margin:0 2vw;
    border-right:1px dotted #CDCDCD;
    vertical-align: middle;
}
.inputdiv{
    width:86vw;
    text-align:center;
    display:inline-block;
    border:1px dotted #CDCDCD;
    margin-top:30px;
    padding:10px 0
}
.input1{
    width:72vw;
    vertical-align:middle;
    background-color: transparent;
}
.input2{
    width:68vw;
    vertical-align:middle;
    background-color: transparent;
}
.input3{
    width:74vw;
    vertical-align:middle;
    background-color: transparent;
}
.input4{
    width:54vw;
    vertical-align:middle;
    background-color: transparent;
}
.eye{
    width:6vw;
    vertical-align:middle;
    
}
.png{
    width:4vw;
    vertical-align:middle;
    margin-right:2vw
}
.login{
    margin-top:5vh;
    width:86vw;
    display:inline-block;
    background-image: linear-gradient(#F07748 , #ED1850);
    color:#fff;
    font-size:40px;
}
.text{
    width:86vw;
    display:inline-block;
}
</style>